import React, { Component } from 'react'
import { Text, StyleSheet, View, ScrollView, Image, TextInput, TouchableOpacity, SafeAreaView, Platform, Animated } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { Button } from 'react-native-paper';
import { connect } from 'react-redux'
import { logout } from '../../redux/actions/user'
import storage from '../../utils/storage'

// const mapStateToProps = state => ({
//   isLoading: state.User.isLoading,
//   isLogin: state.User.isLogin
// })

class Main extends Component {
  constructor(props) {
    super(props)
    console.log('Platform', Platform)
    console.log('Animated', Animated)
  }

  renderItem({title, target, icon}) {
    const { navigate } = this.props.navigation;

    return (
      <TouchableOpacity
        onPress={() => navigate(target)}
        style={{marginVertical: 0}}
      >
        <View style={[styles.listItem, {backgroundColor:  '#eee'}]}>
          <View style={{flexDirection: 'row'}}>
            <Ionicons name={icon.name} size={24} color={icon.color}/>
            <Text style={{marginLeft: 10, fontSize: 18, color: '#666'}}>{title}</Text>
          </View>
          <Ionicons name={'chevron-forward-outline'} size={20} color={'#bbb'}/>
        </View>
      </TouchableOpacity>
    );
  }

  doLogout = () => {
    this.props.logout()
    storage.delete('userInfo')
  }
  
  render() {
    return (
      <SafeAreaView style={[styles.container]}>
        <ScrollView>
          <View style={{flexDirection: 'row', justifyContent: 'center',borderBottomWidth: 1,borderBottomColor: '#ddd'}}>
            <Image
              source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
              style={{width: 80, height: 80, marginVertical: 10, borderRadius: 40}}
            />
          </View>
        
         {/* {this.renderItem({
            title: '用户设置',
            target: 'ProfileSettings',
            icon: {
              name: 'settings-outline',
              color: '#22d'
            }
          })} */}

          <TouchableOpacity
            onPress={() => this.props.navigation.openDrawer()}
            style={{marginVertical: 0}}
          >
            <View style={[styles.listItem, {backgroundColor:  '#eee'}]}>
              <View style={{flexDirection: 'row'}}>
                <Ionicons name={'settings-outline'} size={24} color={'#5a7'}/>
                <Text style={{marginLeft: 10, fontSize: 18, color: '#666'}}>设置</Text>
              </View>
              <Ionicons name={'chevron-forward-outline'} size={20} color={'#bbb'}/>
            </View>
          </TouchableOpacity>

          {this.renderItem({
            title: '关于',
            target: 'ProfileAbout',
            icon: {
              name: 'information-circle-outline',
              color: '#2d3'
            }
          })}

          <TouchableOpacity
            onPress={ this.doLogout }
            style={{marginVertical: 0}}
          >
            <View style={[styles.listItem, {backgroundColor:  '#eee'}]}>
              <View style={{flex:1, flexDirection: 'row', justifyContent: 'center'}}>
                <Text style={{fontSize: 18, color: '#666'}}>退出</Text>
              </View>
            </View>
          </TouchableOpacity>

          <Button icon="camera" mode="contained" onPress={ this.doLogout }
            style={{marginHorizontal: 20, padding: 10, fontSize: 30 }}
          >退出</Button>

        </ScrollView>
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    justifyContent: 'flex-start'
  },
  h2: {
    fontSize: 40,
    fontWeight: 'bold'
  },
  listItem: {
    paddingHorizontal: 20,
    height: 50, 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd'
  }
})

export default connect(null, { logout })(Main)